<template>
  <div>
    <div style="background: #fff">
      <div id="yuannei" ref="print" style="background: #fff">
        <el-form ref="addform" :model="addform" :rules="rules" class="demo-addform" label-position="top">
          <el-row class="form_item_row" type="flex" justify="space-between">
            <el-col class="form_item_col" :span="7">
              <el-form-item label="经办人" prop="operator" style="margin-bottom: 0">
                <el-input v-model="addform.operator" placeholder="请填写经办人" :disabled="isView"></el-input>
              </el-form-item>
            </el-col>
            <el-col class="form_item_col" :span="7">
              <el-form-item label="认证时间" prop="authenticationDate" style="margin-bottom: 0">
                <el-date-picker
                  placeholder="请选择认证时间"
                  :disabled="isView"
                  v-model="addform.authenticationDate"
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 100%"
                  :picker-options="pickerOptionsStart"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="form_item_col" :span="7">
              <el-form-item label="费用（元）" prop="fee" style="margin-bottom: 0">
                <el-input v-model="addform.fee" oninput="this.value=this.value.replace(/[^\d.]/g,'');" placeholder="请填写费用" :disabled="isView"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col class="form_item_col" :span="24">
              <el-form-item label="标题" prop="title" style="margin-bottom: 0">
                <el-input rows="2" type="textarea" :disabled="isView" v-model="addform.title" placeholder="请填写标题"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col class="form_item_col" :span="24">
              <el-form-item label="委托单位" prop="entrustUnit" style="margin-bottom: 0">
                <el-input rows="2" type="textarea" :disabled="isView" v-model="addform.entrustUnit" placeholder="请填写委托单位"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col class="form_item_col" :span="24">
              <el-form-item label="备注" prop="remark" style="margin-bottom: 0">
                <el-input rows="2" type="textarea" :disabled="isView" v-model="addform.remark" placeholder="请填写备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col class="form_item_col" :span="7">
            <el-form-item label="附件" prop="files" style="margin-bottom: 0">
              <uploadFiles :disabled="isView" title="添加附件" @onImagesChange="handleGetUploadFiles($event, 'files')" ref="upload" :source="source"></uploadFiles>
              <span v-if="!addform.files && isView" style="margin-left: 10px">无附件</span>
            </el-form-item>
          </el-col>
        </el-form>
        <el-row class="btn_groups" type="flex" justify="center" v-if="!isView">
          <el-button type="primary" @click="submitApply('addform', 2)">确定</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import uploadFiles from '../tripManagement/uploadFiles.vue';
import { saveMeteringAuthentication } from '../../../api/index';

const createData = () => ({
  authenticationDate: '', //认证时间（yyyy-MM-dd）
  entrustUnit: '', //委托单位
  fee: '', //费用（元）
  files: '', //附件
  fileName: '', //文件名称
  id: '', //主键id
  operator: JSON.parse(sessionStorage.getItem('userInfo')).username, //经办人
  remark: '', //备注
  title: '' //标题
});
export default {
  components: { uploadFiles },
  props: {
    query: {
      default: () => ({})
    }
  },
  data() {
    return {
      addform: createData(),
      approveform: {},
      levelType: [],
      type: 'add',
      isView: false,
      isEdit: false,
      rules: {
        operator: [{ required: true, message: '必填项', trigger: 'blur' }],
        authenticationDate: [{ required: true, message: '必填项', trigger: 'blur' }],
        fee: [{ required: true, message: '必填项', trigger: 'blur' }],
        title: [{ required: true, message: '必填项', trigger: 'blur' }],
        entrustUnit: [{ required: true, message: '必填项', trigger: 'blur' }]
      },
      pickerOptionsStart: {
        disabledDate: (time) => {
          const endDateVal = new Date(this.addform.endDate).getTime();
          if (endDateVal) {
            return time.getTime() > endDateVal - 0;
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          const beginDateVal = new Date(this.addform.beginDate).getTime();
          if (beginDateVal) {
            return time.getTime() < beginDateVal - 0;
          }
        }
      },
      source: []
    };
  },
  created() {
    if (this.query.type == 'view') {
      this.isView = true;
    } else {
      this.isView = false;
    }
    switch (this.query.type) {
      case 'add': {
        break;
      }
      case 'edit': {
        this.fetch(this.query);
        break;
      }
      case 'view': {
        this.fetch(this.query);
        break;
      }
      case 'shenpi': {
        this.fetch(this.query);
        break;
      }
    }
  },
  methods: {
    fetch(row) {
      let _this = this;
      this.addform = row;
      // 设置初始数据
      if (_this.addform.files) {
        const fileName = _this.addform.fileName ? _this.addform.fileName.split('#') : [];
        const source = _this.addform.files.split(',').map((url, index) => {
          return {
            name: fileName[index],
            url: url,
            fileName: fileName[index].slice(0, fileName[index].lastIndexOf('.')),
            type: fileName[index].split('.')[fileName[index].split('.').length - 1]
          };
        });
        this.source = [...source];
      }
    },
    // 上传列表
    handleGetUploadFiles(arr, type) {
      this.source = arr;
    },
    handerClose() {
      this.$emit('close');
    },
    submitApply(formName, val) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let fileName = [];
          let files = [];
          this.source.forEach((item, index) => {
            fileName.push(item.name);
            files.push(item.url);
          });
          this.addform.fileName = fileName.join('#');
          this.addform.files = files.join(',');
          saveMeteringAuthentication(this.addform).then((e) => {
            this.$emit('close');
            this.$message.success('操作成功');
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.el-input-number .el-input__inner {
  text-align: left;
}

.dialog_filter_row {
  display: flex;
  justify-content: space-between;
}

.dialog_filter_row .el-form-item {
  display: flex;
  flex-direction: column;
  width: 188px;
}

.dialog_filter_row .el-select,
.dialog_filter_row .el-date-editor,
.dialog_filter_row .el-input-group {
  width: unset !important;
}

.form_item_col {
  width: 188px;
}
::v-deep .el-form-item__label {
  margin: 20px 0 10px;
  height: 14px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #00041a;
  line-height: 14px;
  text-indent: 14px;

  &:before {
    color: #ff4d4f;
    font-size: 14px;
  }
}

.btn_groups {
  margin: 40px 0 0;
  display: flex;
  justify-content: flex-end;
  .el-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 87px;
    height: 32px;
    background: #3f8cff;
    border-radius: 2px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
}

.date_picker {
  width: 188px;
}

/deep/.btn_groups .search-btn {
  background-color: #fff;
  border: 1px solid #3f8cff;
  color: #3f8cff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner {
  cursor: default;
}

/deep/.el-input.is-disabled .el-input__inner {
  cursor: default;
}
</style>